<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath%>">
		<title>insert title</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
			<link rel="stylesheet" type="text/css" href="styles.css">
		-->
		<link rel="stylesheet" type="text/css" href="<%=basePath %>scripts/static/h-ui/css/H-ui.min.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>scripts/static/h-ui.admin/css/H-ui.admin.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>scripts/lib/Hui-iconfont/1.0.7/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>scripts/lib/icheck/icheck.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>scripts/static/h-ui.admin/skin/default/skin.css" id="skin" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>scripts/static/h-ui.admin/css/style.css" />
		<link rel="stylesheet" type="text/css" href="<%=basePath %>styles/page.css" />
		<script type="text/javascript" src="<%=basePath %>scripts/jquery-1.9.1.js"></script>
		<script type="text/javascript" src="<%=basePath %>scripts/lib/excel/cpexcel.js"></script> 
		<script type="text/javascript" src="<%=basePath %>scripts/lib/layer/2.1/layer.js"></script>
		
	</head>
	<body>
		<div class="page-container">
			<div class="cl pd-5 bg-1 bk-gray mt-20"> 
				<span class="l">
					<input class="btn btn-primary radius" type="file" id="xlf"/>&nbsp;&nbsp;
					<button class="btn btn-primary radius" onclick="readFile();">查看</button>
				</span>
				<span class="r">
					<button class="btn btn-primary radius" onclick="batchUpload();">上传数据</button>
				</span>
			</div>
			<div class="mt-20">
				<table class="table table-border table-bordered table-bg table-hover table-sort">
					<thead>
						<tr class="text-c">
							<th width="120">学院编号</th>
							<th width="80">学院名称</th>
							<th width="80">操作</th>
							<th width="80">状态</th>
						</tr>
					</thead>
					<tbody id="data">
						
					</tbody>
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="<%=basePath %>scripts/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="<%=basePath %>scripts/lib/excel/cpexcel.js"></script> 
	<script type="text/javascript" src="<%=basePath %>scripts/lib/excel/jszip.js"></script> 
	<script type="text/javascript" src="<%=basePath %>scripts/lib/excel/shim.js"></script> 
	<script type="text/javascript" src="<%=basePath %>scripts/lib/excel/xlsx.js"></script> 
	<script type="text/javascript" src="<%=basePath %>scripts/lib/layer/2.1/layer.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#data").on('click','#insert',function(){
			var collegeNo = $(this).parents("tr").children("#collegeNo").text();
			var collegeName = $(this).parents("tr").children("#collegeName").text();
			var obj = this;
			$.ajax({
				url:'<%=basePath%>college/collegeAdd',
				type:'post',
				dataType:'text',
				data:{'collegeNo':collegeNo,'coolegeName':collegeName},
				success:function(text){
					$(obj).parents("tr").children("#tag").text("上传成功");
				},
				error:function(){
					$(obj).parents("tr").children("#tag").removeClass("c-green").addClass("c-red");
					$(obj).parents("tr").children("#tag").text("数据存在，请勿再上传");
				}
			});
		});
		
	});
		
	function batchUpload(){
		$("#data tr").each(function(){
			var collegeNo = $(this).children("#collegeNo").text();
			var collegeName = $(this).children("#collegeName").text();
			var obj = this;
			$.ajax({
				url:'<%=basePath%>college/collegeAdd',
				type:'post',
				dataType:'text',
				data:{'collegeNo':collegeNo,'coolegeName':collegeName},
				success:function(text){
					$(obj).children("#tag").text("上传成功");
				},
				error:function(){
					$(obj).children("#tag").removeClass("c-green").addClass("c-red");
					$(obj).children("#tag").text("数据存在，请勿再上传");
				}
			});
		});	
	}
	/*jshint browser:true */
	/*global XLSX */
	var X = XLSX;

	function readFile(){
		
		var files = $("#xlf").prop('files');
		var f = files[0];
		console.log(f);
		var reader = new FileReader();
		reader.onload = function(e){
			var data = e.target.result;
			var wb;
			wb = X.read(data, {type: 'binary'});
			process_wb(wb);
		};
		reader.readAsBinaryString(f);
		$('#xlf').val('');
	}
	function process_wb(wb){
		var output = "";
		output = to_csv(wb);
		display(output);
	}
	function to_csv(workbook) {
		var result = [];
		workbook.SheetNames.forEach(function(sheetName) {
			var csv = X.utils.sheet_to_csv(workbook.Sheets[sheetName]);
			if(csv.length > 0){
				result.push(csv);
			}
		});
		return result.join("\n");
	}
	function display(output){
		var temp = output.split("\n");
		var data = new Array();
		var m = 0;
		for(var i=1; i<temp.length-1; i++){
			data[m] = temp[i];
			m++;
		}
		var array = new Array();
		for(var i = 0; i<data.length; i++){
			array[i] = data[i].split(",");	
		}
		
		var html = "";
		for(var i = 0; i<array.length; i++){
			var text = "<tr class='text-c'>";
			
				text = text+ "<td id='collegeNo'>"+array[i][0]+"</td>"+
							 "<td id='collegeName'>"+array[i][1]+"</td>";
			
			text +="<td><a class='btn radius' id='insert' href='javascript:;'>上传</a></td><td id='tag' class='c-green'>未上传</td></tr>";
			html += text;
		}
		$("#data").html(html);
	}
	</script>
</html>